<mat-accordion multi>
  @for (item of content; track item; let i = $index) {
    <mat-expansion-panel [expanded]="i === 0" (afterExpand)="onAfterExpand()">
      <mat-expansion-panel-header>
        <mat-panel-title>
          {{ item.label }}
        </mat-panel-title>
        @if (item.description) {
          <mat-panel-description>
            {{ item.description }}
          </mat-panel-description>
        }
      </mat-expansion-panel-header>
      <mat-list>
        <div
          class="cards grid grid-cols-12 gap-1"
          id="widgets"
          cdkDropList
          cdkDropListSortingDisabled="true"
          [cdkDropListData]="item.elements"
          [cdkDropListConnectedTo]="['builder-list']"
        >
          @for (widget of item.elements; track widget) {
            @if (!widget.child) {
              <div
                class="item col-span-6 sm:col-span-4"
                [matTooltip]="
                  builder.fixedContent === widget.content ? '已锁定预览，可查看复制组件JSON' : ''
                "
                matTooltipPosition="above"
              >
                <app-btn
                  (click)="add(widget.content)"
                  class="add"
                  matTooltip="添加到编辑区"
                  matTooltipPosition="above"
                  [content]="{ color: 'primary', mode: 'icon', icon: { svg: 'plus' } }"
                />
                <div
                  matRipple
                  class="w-full"
                  [cdkDragData]="widget.content"
                  cdkDrag
                  (cdkDragStarted)="onDragStarted()"
                  (cdkDragMoved)="onMoved()"
                  (mouseenter)="onShowcase(widget.content)"
                  (mouseleave)="hideShowcase()"
                >
                  <div
                    (click)="onFixed(widget.content)"
                    class="inner move flex flex-col justify-center items-center"
                    [ngClass]="builder.fixedContent === widget.content ? 'active' : ''"
                  >
                    @if (widget.icon) {
                      <app-icon [content]="widget.icon" />
                    }
                    <div class="title" title="{{ widget.label }}">
                      {{ widget.label }}
                    </div>
                  </div>
                </div>
              </div>
            }
            @if (widget.child) {
              <div class="group col-span-12 grid grid-cols-12 gap-1" matTooltipPosition="above">
                @for (item of widget.child; track item) {
                  <div
                    class="item col-span-6 sm:col-span-4"
                    [matTooltip]="
                      builder.fixedContent === item.content ? '已锁定预览，可查看复制组件JSON' : ''
                    "
                    matTooltipPosition="above"
                  >
                    <app-btn
                      (click)="add(item.content)"
                      class="add"
                      matTooltip="添加到编辑区"
                      matTooltipPosition="above"
                      [content]="{ color: 'primary', mode: 'icon', icon: { svg: 'plus' } }"
                    />
                    <div
                      matRipple
                      class="w-full"
                      [cdkDragData]="item.content"
                      cdkDrag
                      (cdkDragStarted)="onDragStarted()"
                      (cdkDragMoved)="onMoved()"
                      (mouseenter)="onShowcase(item.content)"
                      (mouseleave)="hideShowcase()"
                    >
                      <div
                        (click)="onFixed(item.content)"
                        class="inner move flex flex-col justify-center items-center"
                        [ngClass]="builder.fixedContent === item.content ? 'active' : ''"
                      >
                        @if (item.icon) {
                          <app-icon [content]="item.icon" />
                        }
                        <div class="title" title="{{ item.label }}">
                          {{ item.label }}
                        </div>
                      </div>
                    </div>
                  </div>
                }
              </div>
            }
          }
        </div>
      </mat-list>
    </mat-expansion-panel>
  }
</mat-accordion>
